<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./OL_SDK/include-openlayers-local.js"></script>
    <script src="./libs/gaode.js"></script>
    <script src="./utils/createDraw.js"></script>
    <script src="./utils/setMarkerStyle.js"></script>
    <script src="./utils/delFeature.js"></script>
</head>

<body>
    <button onclick="queryFids()">查询</button>
    <div id="map">
    </div>
    <script>
        var docLayer = new Zondy.Map.Doc("", "zxd-plus-pla", {

        })
        var map = new ol.Map({
            target: "map",
            layers: [gaode, docLayer],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [114.30, 30.50],
                zoom: 4
            })
        })
        /* 创建图层 */
        let source = new ol.source.Vector({

        })
        let layer = new ol.layer.Vector({
            source
        })
        map.addLayer(layer)
        function queryFids() {
            let draw = createDraw({
                type: "Box",
                source
            })
            map.addInteraction(draw)
            draw.on("drawend", handleDraw)
        }
        function handleDraw(evt) {
            let geometry = evt.feature.getGeometry();

            //初始化查询结构对象，设置查询结构包含几何信息
            var queryStruct = new Zondy.Service.QueryFeatureStruct();
            //是否包含几何图形信息
            queryStruct.IncludeGeometry = true;
            //是否包含属性信息
            queryStruct.IncludeAttribute = true;
            //是否包含图形显示参数
            queryStruct.IncludeWebGraphic = false;
            //创建一个用于查询的区
            var geomObj = new Zondy.Object.Polygon();
            geomObj.setByOL(geometry);
            //指定查询规则
            var rule = new Zondy.Service.QueryFeatureRule({
                //是否将要素的可见性计算在内
                EnableDisplayCondition: false,
                //是否完全包含
                MustInside: false,
                //是否仅比较要素的外包矩形
                CompareRectOnly: false,
                //是否相交
                Intersect: true
            });
            //实例化查询参数对象
            var queryParam = new Zondy.Service.QueryParameter({
                geometry: geomObj,
                resultFormat: "json",
                struct: queryStruct,
                rule: rule
            });
            //设置查询分页号
            queryParam.pageIndex = 0;
            //设置查询要素数目
            queryParam.recordNumber = 20;
            //实例化地图文档查询服务对象
            var queryService = new Zondy.Service.QueryDocFeature(queryParam, "zxd-plus-pla", 2, {

            });
            //执行查询操作，querySuccess为查询回调函数
            queryService.query(querySuccess);
        }
        /* 高亮图层 -显示查询到的要素 */
        const high_source = new ol.source.Vector({

        })
        const high_layer = new ol.layer.Vector({
            source: high_source,
            style: setMarkerStyle('/images/位置.png')
        })
        map.addLayer(high_layer)
        function querySuccess(result) {
            var format = new Zondy.Format.PolygonJSON();
            //将MapGIS要素JSON反序列化为ol.Feature类型数组
            var features = format.read(result);
            // console.log(features)
            /* 让查询到的要素高亮 */
            high_source.addFeatures(features)
            /* fids */
            var fids = result.SFEleArray.map(item => item.FID);
            console.log(fids);
            if (fids.length) {
                var isDelete = window.confirm("你确定删除吗");
                if (isDelete) {
                    let service = {
                        name: "zxd-plus-pla",
                        layerId: 2
                    }
                    delFeature({
                        fids,
                        docLayer,
                        service
                    })
                }
            }


        }
    </script>
</body>

</html>